<template>
  <div class="progress-bar-row" :class="color">
    <div class="circle-progress">
      <svg width="64" height="64">
        <circle class="circle-bg" cx="32" cy="32" r="28" />
        <circle class="circle-bar" :style="{ stroke: mainColor }" cx="32" cy="32" r="28" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset" />
      </svg>
      <div class="circle-center">
        <div class="circle-icon" v-if="icon">
          <component :is="iconComponent" class="icon-svg" :style="{ color: mainColor }" />
        </div>
        <div class="percent">{{ displayValue }}%</div>
        <div class="circle-label">{{ label }}</div>
      </div>
    </div>
    <div class="progress-info">
      <div class="progress-title">
        <span v-if="icon && !iconInCircle" class="icon-inline"><component :is="iconComponent" class="icon-svg" :style="{ color: mainColor }" /></span>
        {{ label }}
      </div>
      <div class="progress-count" :style="{ color: mainColor, textShadow: '0 0 12px ' + mainColor }">{{ displayCount }}</div>
      <div class="progress-bar">
        <div class="progress-inner" :style="{ width: animatedWidth + '%', background: barGradient }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';
// 内置简单SVG图标
const iconMap = {
  user: {
    template: '<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="8" r="4" fill="currentColor"/><path d="M4 20c0-4 16-4 16 0" stroke="currentColor" stroke-width="2" fill="none"/></svg>'
  },
  star: {
    template: '<svg viewBox="0 0 24 24" width="24" height="24"><polygon points="12,2 15,9 22,9 17,14 18,21 12,17 6,21 7,14 2,9 9,9" fill="currentColor"/></svg>'
  },
  shop: {
    template: '<svg viewBox="0 0 24 24" width="24" height="24"><rect x="3" y="7" width="18" height="13" rx="2" fill="currentColor"/><rect x="1" y="3" width="22" height="5" rx="2" fill="currentColor" opacity=".5"/></svg>'
  },
  chart: {
    template: '<svg viewBox="0 0 24 24" width="24" height="24"><rect x="4" y="10" width="3" height="7" fill="currentColor"/><rect x="10" y="6" width="3" height="11" fill="currentColor"/><rect x="16" y="13" width="3" height="4" fill="currentColor"/></svg>'
  }
};
const props = defineProps({
  label: String,
  value: Number, // 百分比
  count: Number, // 数值
  color: { type: String, default: 'blue' }, // blue/green/orange/purple
  icon: { type: String, default: '' }, // user/star/shop/chart
  iconInCircle: { type: Boolean, default: true } // 图标是否在圆环内
});
const colorMap = {
  blue: {
    main: '#00f0ff',
    bar: 'linear-gradient(90deg, #00f0ff 0%, #1e90ff 100%)',
    shadow: '#00f0ff99'
  },
  green: {
    main: '#00ffb0',
    bar: 'linear-gradient(90deg, #00ffb0 0%, #1aff6b 100%)',
    shadow: '#00ffb099'
  },
  orange: {
    main: '#ffb300',
    bar: 'linear-gradient(90deg, #ffb300 0%, #ff6a00 100%)',
    shadow: '#ffb30099'
  },
  purple: {
    main: '#a066ff',
    bar: 'linear-gradient(90deg, #a066ff 0%, #5e2fff 100%)',
    shadow: '#a066ff99'
  }
};
const mainColor = computed(() => colorMap[props.color]?.main || '#00f0ff');
const barGradient = computed(() => colorMap[props.color]?.bar || colorMap.blue.bar);
const shadowColor = computed(() => colorMap[props.color]?.shadow || colorMap.blue.shadow);

// SVG图标渲染
const iconComponent = computed(() => {
  if (!props.icon || !iconMap[props.icon]) return null;
  return { render() { return h('span', { innerHTML: iconMap[props.icon].template }); } };
});

// 圆环动画
const dashArray = 2 * Math.PI * 28;
const dashOffset = computed(() => dashArray * (1 - animatedValue.value / 100));
const animatedValue = ref(0);
const displayValue = ref(0);
const animatedWidth = ref(0);
const displayCount = ref(0);
function animate(target, refValue, duration = 900) {
  let start = 0;
  let startTime = null;
  function step(ts) {
    if (!startTime) startTime = ts;
    const progress = Math.min((ts - startTime) / duration, 1);
    refValue.value = Math.floor(start + (target - start) * progress);
    if (progress < 1) requestAnimationFrame(step);
    else refValue.value = target;
  }
  requestAnimationFrame(step);
}
function startAnim() {
  animate(props.value, animatedValue);
  animate(props.value, displayValue);
  animate(props.value, animatedWidth);
  animate(props.count, displayCount);
}
onMounted(startAnim);
watch(() => [props.value, props.count], startAnim);
</script>

<style scoped>
.progress-bar-row {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 18px;
  background: transparent;
}
.circle-progress {
  width: 64px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-bg {
  fill: none;
  stroke: #0a2a4d;
  stroke-width: 6px;
}
.circle-bar {
  fill: none;
  stroke-width: 6px;
  filter: drop-shadow(0 0 8px var(--main-color, #00f0ff));
  transition: stroke-dashoffset 0.8s cubic-bezier(.4,2,.6,1);
  stroke-linecap: round;
}
.circle-center {
  position: absolute;
  left: 0; top: 0; width: 64px; height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.circle-icon {
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-svg {
  width: 22px;
  height: 22px;
  display: inline-block;
  filter: drop-shadow(0 0 6px currentColor);
}
.percent {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 8px #00f0ff99;
  margin-top: 2px;
}
.progress-bar-row.blue .percent { color: #00f0ff; text-shadow: 0 0 8px #00f0ff; }
.progress-bar-row.green .percent { color: #00ffb0; text-shadow: 0 0 8px #00ffb0; }
.progress-bar-row.orange .percent { color: #ffb300; text-shadow: 0 0 8px #ffb300; }
.progress-bar-row.purple .percent { color: #a066ff; text-shadow: 0 0 8px #a066ff; }
.circle-label {
  color: #fff;
  font-size: 12px;
  margin-top: 2px;
  text-shadow: 0 0 6px #00f0ff99;
}
.progress-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.progress-title {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-shadow: 0 0 8px #00f0ff44;
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-inline .icon-svg {
  width: 18px;
  height: 18px;
}
.progress-count {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 2px;
  transition: color 0.3s;
}
.progress-bar {
  width: 100%;
  height: 14px;
  background: #0a2a4d;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid currentColor;
  box-shadow: 0 0 8px 0 currentColor;
  position: relative;
}
.progress-bar-row.blue .progress-bar { color: #00f0ff; }
.progress-bar-row.green .progress-bar { color: #00ffb0; }
.progress-bar-row.orange .progress-bar { color: #ffb300; }
.progress-bar-row.purple .progress-bar { color: #a066ff; }
.progress-inner {
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 8px 0 currentColor;
  transition: width 0.6s cubic-bezier(.4,2,.6,1);
  position: relative;
  z-index: 2;
}
</style> 